<template>
  <!-- labelWidth="100px" -->
  <Form :formItems="formItems" v-model="formData">
    <template v-for="(item, index) in formItems" #[item.prop] :key="index">
      <component :is="item.component(item.state)" v-model="item.state.value" />
    </template>
  </Form>
</template>

<script setup>
import Form from "@/components/Basic/Form/index.vue";
import { ref, watch } from "vue";
defineOptions({
  name: "FormContainer",
  inheritAttrs: false,
});
const formItems = ref([]);
const props = defineProps({
  children: {
    type: Array,
    default: () => [],
  },
});

watch(
  () => props.children,
  () => {
    formItems.value = props.children.map((v) => {
      v.label = v.state.label;
      v.prop = v.state.prop;
      return v;
    });
  },
  {
    deep: true,
  }
);

const formData = ref({
  name: "",
});
</script>

<style scoped></style>
